#{extends 'midas/content.html' /} 
#{set title:'Command Class Data' /} 
#{set header:'MML Command Class Data'/}
#{set 'toolbar'} 
	#{commandClassToolbar buttons:buttons/}
#{/set}
#{set 'helpData'}
	<script src="@{'/public/javascripts/app/commandClassDataHelp.js'}" type="text/javascript" charset="UTF-8"></script>
#{/set}
#{set 'renderScript'}
	<script type="text/javascript">	
		$(document).ready(function() {	
			elementsRender();
			renderSB();
			configuraBtn($.parseJSON($("#buttonArray").val()));
			determineMode();
		})			
	</script>
#{/set}
<fieldset>
	<legend>General Information - Grammar #{if !bean.grammar} not #{/if}Checked</legend>
	<input type="hidden" name="bean.grammar" value="${bean.grammar}">
	<ul class="sl-table">
		<li>
			<label help="CDClass">MML Command Class</label> 
			<input id="classLetter" type="text" class="read width300 NewVer New" value="${bean.classLetter}">
			<select name="bean.classLetterId" class="edit width300 NewVer New">
				<option value="${bean.classLetterId}" selected>${bean.classLetter}</option>
			#{list items:letters, as:'letter'}
    			<option value="${letter.id}">${letter.letter}</option>
			#{/list}
			</select>
		</li>		
		<li #{if bean.acceptedDate == "" || bean.acceptedDate == null}style="display:none"#{/if}>
			<label help="CDAcceptedDate">Accepted</label> 			
			<input name="bean.acceptedDate" type="text" class="readOnly width300" value="${bean.acceptedDate}">		
		</li>		
		<li>
			<label help="CDENMenuText">English Menu Text *</label> 
			<input id="enMenuText" type="text" class="read width300" value="${bean.enMenuText}">
			<input name="bean.enMenuText" type="text" class="edit width300" value="${bean.enMenuText}">
		</li>
		<li>
			<label help="CDNetworkElement">Network Element(s) *</label>
			<input name="bean.elementsStr" type="text" class="read width300">
			<input name="bean.elementsIds" type="hidden" value="${bean.elementsIds}">
			<table class="edit">
				<tr>
					<th>Chosen network elements</th>
					<th></th>
					<th>Available network elements</th>
				</tr>
				<tr>
					<td>
						<select id="existElements" size="6" multiple class="width200">
						#{list items:bean.networkElements, as:'ne'}
    						<option value="${ne.key}">${ne.value}</option>
						#{/list}
						</select>
					</td>
					<td>
						<a href="javascript:void(0)" class="button left" onclick="javascript:removeElement();"><span class="icon icon9"></span><span class="label"></span></a>
						<br />
						<br />
						<a href="javascript:void(0)" class="button left" onclick="javascript:addElement();"><span class="icon icon8"></span><span class="label"></span></a>
					</td>
					<td>
						<select size="6" multiple class="width200" id="availableElements">
						#{list items:elements, as:'element'}
    						<option value="${element.key}">${element.value}</option>
						#{/list}
						</select>
					</td>
				</tr>
			</table>
		</li>
		<li>
			<label help="CDApplication">Application</label>
			<input id="application" type="text" class="read width300" value="${bean.application}">
			<select name="bean.application" class="edit width300">
			#{list items:applications, as:'application'}
				<option value="${application}" #{if bean.application == application}selected#{/if}>${application}</option>
			#{/list}
			</select>
		</li>
		<li>
			<label>Software Build(s) *</label>
			#{softwarebuilds builds:bean.builds,buildIds:bean.buildsIds/}
		</li>
		<li>
			<label help="CDStatus">Command Class Status *</label>
			<input id="status" type="text" class="read" value="${bean.status}">
			<table class="edit" >
			#{list items:states, as:'state'}
				<tr><td><input type="radio" name="bean.status" value="${state}" #{if bean.status == state}checked#{/if}/>${state}</td></tr>
			#{/list}
			</table>
		</li>
	</ul>

</fieldset>
<br />
<script type="text/javascript">
	function elementsRender(){
		var elements = "";
		var ids = "";
		$("#existElements option").each(function(){
			elements += $(this).text() + " ,";
			ids += $(this).val() + " ,";
		})
		$("input[name=bean\\.elementsStr]").val(elements.slice(0,-1));
		$("input[name=bean\\.elementsIds]").val(ids.slice(0,-1));
	}
	function getChosenElements(){
		var elements = "";
		$("#existElements option").each(function(){
			elements += $(this).val() + ",";
		})
		$("input[name=bean\\.elementsIds]").val(elements.slice(0,-1));
	}
	function addElement(){
		$("#availableElements option:selected").each(function(){
			var exists = $("#existElements option");
			var flag = true;
			for(var i = 0; i < exists.length; i++){
				if($(this).val() == $(exists[i]).val()){
					flag = false;
				}
			}
			if(flag){
				/* Fix a bug: there is a blank line after adding elements
				 * Added by z10liu
				 * Beginning
				 */
				if(exists.length == 1 && $("#existElements option:first").text() == "") {
					$("#existElements option:first").remove();
				}
				/* Fix a bug: there is a blank line after adding elements
				 * Added by z10liu
				 * End
				 */
				
				$("#existElements").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
			}
		});
		elementsRender();
	}
	function removeElement(){
		$("#existElements option:selected").each(function(){
			$(this).remove();
		});
		elementsRender();
	}

</script>